<template>
    <div class="videojsFlv-container">
        <video
            :id="idName"
            :class="className"
            :width="width"
            :height="height"
        ></video>
    </div>
</template>
<script>

export default {
    props: {
        playerOption: {
            type: Object,
            default() {
                return {};
            }
        },
        idName: {
            type: String,
            default: "videojs-flvjs-player"
        },
        className: {
            type: String,
            default: "video-js vjs-default-skin vjs-big-play-centered"
        },
        width: {
            type: String,
            default: "100%"
        },
        height: {
            type: String,
            default: "100%"
        }
    },
    data() {
        return {
            videojsFlv: null
        };
    },
    mounted() {
        this.init();
    },
    beforeDestroy() {
        // if (!this.videojsFlv) {
        //     return;
        // }
        this.videojsFlv && this.videojsFlv.dispose();
    },
    methods: {
        init() {
            this.videojsFlv && this.videojsFlv.dispose();
            var videojs =window.videojs;
            this.videojsFlv =videojs(
                "videojs-flvjs-player",
                {
                    techOrder: ["html5", "flvjs"],
                    flvjs: {
                        mediaDataSource: {
                            isLive: false,
                            cors: true,
                            withCredentials: false
                        }
                    },
                    sources: [
                        {
                            src: this.playerOption.url,
                            type: "video/flv"
                        }
                    ],
                    controls: true,
                    autoplay: true,
                    preload: "none"
                },
                function onPlayerReady() {
                    console.log("player ready");
                    // player.on('error', (err) => {
                    //     console.log('first source load fail')

                    //     player.src({
                    //         src: flvUrl,
                    //         type: 'video/x-flv'
                    //     });

                    //     player.ready(function() {
                    //         console.log('player ready')
                    //         player.load();
                    //         player.play();
                    //     });
                    // })
                }
            );
        },
    }
};
</script>
<style>
.videojsFlv-container,.video-js {
    display: inline-block;
    width: 100%;
    height: 100%;
}
</style>
